<!DOCTYPE html>
<html lang=zh>
<head><meta name="generator" content="Hexo 3.9.0">
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="前言vue 前端时间更新创建 vue 项目的命令行工具，变得比以前更加简洁了，隐藏了之间 build、config 这些目录，自定义配置都放在一个 vue.config.js 的文件中。忙里偷闲，我也来学一波，下面是我的一些笔记。 配置说明我直接把自己之前写的 vue.config.js 的文件贴出来了，大家直接看备注就行了 123456789101112131415161718192021222">
<meta name="keywords" content="default">
<meta property="og:type" content="article">
<meta property="og:title" content="vue-cli-v3.0配置说明">
<meta property="og:url" content="https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/index.html">
<meta property="og:site_name" content="月光倾城的代码小屋">
<meta property="og:description" content="前言vue 前端时间更新创建 vue 项目的命令行工具，变得比以前更加简洁了，隐藏了之间 build、config 这些目录，自定义配置都放在一个 vue.config.js 的文件中。忙里偷闲，我也来学一波，下面是我的一些笔记。 配置说明我直接把自己之前写的 vue.config.js 的文件贴出来了，大家直接看备注就行了 123456789101112131415161718192021222">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg">
<meta property="og:updated_time" content="2019-01-17T11:24:34.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="vue-cli-v3.0配置说明">
<meta name="twitter:description" content="前言vue 前端时间更新创建 vue 项目的命令行工具，变得比以前更加简洁了，隐藏了之间 build、config 这些目录，自定义配置都放在一个 vue.config.js 的文件中。忙里偷闲，我也来学一波，下面是我的一些笔记。 配置说明我直接把自己之前写的 vue.config.js 的文件贴出来了，大家直接看备注就行了 123456789101112131415161718192021222">
<meta name="twitter:image" content="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg">
    
    
        
          
              <link rel="shortcut icon" href="/images/favicon.ico">
          
        
        
          
            <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
          
        
        
          
            <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
          
        
    
    <!-- title -->
    <title>vue-cli-v3.0配置说明</title>
    <!-- styles -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- persian styles -->
    
      <link rel="stylesheet" href="/css/rtl.css">
    
    <!-- rss -->
    
    
</head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/search/">搜索</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/others/">其他文章</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2019/03/12/js_extends_principle/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" href="/2018/12/08/html5_file_api/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&text=vue-cli-v3.0配置说明"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&is_video=false&description=vue-cli-v3.0配置说明"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=vue-cli-v3.0配置说明&body=Check out this article: https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&name=vue-cli-v3.0配置说明&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#前言"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置说明"><span class="toc-number">2.</span> <span class="toc-text">配置说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#如何使用-eslint"><span class="toc-number">3.</span> <span class="toc-text">如何使用 eslint</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#如何打包多个页面"><span class="toc-number">4.</span> <span class="toc-text">如何打包多个页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#结束"><span class="toc-number">5.</span> <span class="toc-text">结束</span></a></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        vue-cli-v3.0配置说明
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">月光倾城的代码小屋</span>
      </span>
      
    <div class="postdate">
        <time datetime="2019-01-17T11:24:34.000Z" itemprop="datePublished">2019-01-17</time>
    </div>


      

      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link" href="/tags/default/">default</a>
    </div>


    </div>
  </header>
  
<div class="article-gallery">
    
    <a class="gallery-item" href="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg" rel="gallery_ck5exevs9003xayojra521hdo">
        <img src="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg" itemprop="image" />
    </a>
    
</div>


  <div class="content" itemprop="articleBody">
    <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p><code>vue</code> 前端时间更新创建 <code>vue</code> 项目的命令行工具，变得比以前更加简洁了，隐藏了之间 <code>build</code>、<code>config</code> 这些目录，自定义配置都放在一个 <code>vue.config.js</code> 的文件中。忙里偷闲，我也来学一波，下面是我的一些笔记。</p>
<h3 id="配置说明"><a href="#配置说明" class="headerlink" title="配置说明"></a>配置说明</h3><p>我直接把自己之前写的 <code>vue.config.js</code> 的文件贴出来了，大家直接看备注就行了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="keyword">let</span> glob = <span class="built_in">require</span>(<span class="string">'glob'</span>)</span><br><span class="line"><span class="comment">// 配置pages多页面获取当前文件夹下的html和js</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getEntry</span>(<span class="params">globPath</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> entries = &#123;&#125;</span><br><span class="line">  <span class="keyword">let</span> basename</span><br><span class="line">  <span class="keyword">let</span> tmp</span><br><span class="line">  <span class="keyword">let</span> pathname</span><br><span class="line"></span><br><span class="line">  glob.sync(globPath).forEach(<span class="function"><span class="keyword">function</span>(<span class="params">entry</span>) </span>&#123;</span><br><span class="line">    basename = path.basename(entry, path.extname(entry))</span><br><span class="line">    tmp = entry.split(<span class="string">'/'</span>).splice(<span class="number">-3</span>)</span><br><span class="line">    pathname = basename <span class="comment">// 正确输出js和html的路径</span></span><br><span class="line"></span><br><span class="line">    entries[pathname] = &#123;</span><br><span class="line">      entry: <span class="string">'src/'</span> + tmp[<span class="number">0</span>] + <span class="string">'/'</span> + tmp[<span class="number">1</span>] + <span class="string">'/'</span> + tmp[<span class="number">1</span>] + <span class="string">'.js'</span>,</span><br><span class="line">      template: <span class="string">'src/'</span> + tmp[<span class="number">0</span>] + <span class="string">'/'</span> + tmp[<span class="number">1</span>] + <span class="string">'/'</span> + tmp[<span class="number">2</span>],</span><br><span class="line">      title: tmp[<span class="number">2</span>],</span><br><span class="line">      filename: tmp[<span class="number">2</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> entries</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> pages = getEntry(<span class="string">'./src/pages/**?/*.html'</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  publicPath: process.env.NODE_ENV === <span class="string">'production'</span> ? <span class="string">'http://172.20.216.109/admin/'</span> : <span class="string">'/'</span>, <span class="comment">// 部署应用包时的基本 URL</span></span><br><span class="line">  outputDir: <span class="string">'dist'</span>, <span class="comment">// 执行npm run build时的本地打包地址</span></span><br><span class="line">  assetsDir: <span class="string">''</span>, <span class="comment">// 放置生成的静态资源的地址，如果使用CDN的话就填写CDN地址</span></span><br><span class="line">  indexPath: <span class="string">'index.html'</span>, <span class="comment">// 指定生成的index.html相对于outputDir的地址，默认是index.html</span></span><br><span class="line">  filenameHashing: <span class="literal">true</span>, <span class="comment">// 是否给生成的静态资源在它们的文件名中加上 hash，以便更好的控制缓存，如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。</span></span><br><span class="line">  lintOnSave: process.env.NODE_ENV !== <span class="string">'production'</span>, <span class="comment">// 开发环境每次保存都执行eslint，在生产构建时禁用eslint</span></span><br><span class="line">  productionSourceMap: <span class="literal">false</span>, <span class="comment">// 禁用生产环境的source map</span></span><br><span class="line">  pages,</span><br><span class="line">  configureWebpack: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 使用configureWebpack调整 webpack 配置，新加的配置会被webpack-merge 合并入最终的 webpack 配置</span></span><br><span class="line">    <span class="keyword">if</span> (process.env.QS === <span class="string">'zhongtai'</span>) &#123;</span><br><span class="line">      <span class="comment">// 为生产环境修改配置...</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 为开发环境修改配置...</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  css: &#123;</span><br><span class="line">    modules: <span class="literal">false</span>, <span class="comment">// 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。</span></span><br><span class="line">    extract: <span class="literal">true</span>, <span class="comment">// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)</span></span><br><span class="line">    sourceMap: <span class="literal">false</span>, <span class="comment">// 是否为 CSS 开启 source map</span></span><br><span class="line">    loaderOptions: &#123;</span><br><span class="line">      css: &#123;</span><br><span class="line">        <span class="comment">// 这里的选项会传递给 css-loader</span></span><br><span class="line">        localIdentName: <span class="string">'[name]-[hash]'</span>,</span><br><span class="line">        camelCase: <span class="string">'only'</span></span><br><span class="line">      &#125;,</span><br><span class="line">      sass: &#123;</span><br><span class="line">        <span class="comment">// sass 公共模块</span></span><br><span class="line">        <span class="comment">// eslint-disable-next-line</span></span><br><span class="line">        data: <span class="string">`</span></span><br><span class="line"><span class="string">        @import "@styles/variables.scss"</span></span><br><span class="line"><span class="string">        @import "@styles/variables.scss"</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  devServer: &#123;</span><br><span class="line">    port: <span class="number">8080</span>,</span><br><span class="line">    host: <span class="string">'localhost'</span>, <span class="comment">// 默认是localhost，如果你希望外部可以访问，可以设置成0.0.0.0</span></span><br><span class="line">    index: <span class="string">'page1.html'</span>,</span><br><span class="line">    proxy: &#123;</span><br><span class="line">      <span class="comment">// 如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。</span></span><br><span class="line">      <span class="string">'/api'</span>: &#123;</span><br><span class="line">        target: <span class="string">'http://localhost:3000'</span>, <span class="comment">// 请求/api2/users时就会被代理到http://localhost:3000/users,</span></span><br><span class="line">        changeOrigin: <span class="literal">true</span>,</span><br><span class="line">        pathRewrite: &#123; <span class="string">'^/api'</span>: <span class="string">''</span> &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    lazy: <span class="literal">false</span>, <span class="comment">// 默认false， 为true时dev-server 只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为惰性模式。</span></span><br><span class="line">    allowedHosts: [</span><br><span class="line">      <span class="comment">// 配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回</span></span><br><span class="line">      <span class="string">'.10jqka.com.cn'</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  pluginOptions: &#123;</span><br><span class="line">    <span class="comment">// 用来传递任何第三方插件选项</span></span><br><span class="line">    foo: &#123;</span><br><span class="line">      <span class="comment">// 插件可以作为 `options.pluginOptions.foo` 访问这些选项。</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="如何使用-eslint"><a href="#如何使用-eslint" class="headerlink" title="如何使用 eslint"></a>如何使用 eslint</h3><p>在项目根目录下执行 <code>eslint init</code> 创建一个一个<code>.eslintrc.js</code>，具体配置如下：</p>
<figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">module.exports = &#123;</span><br><span class="line">  <span class="keyword">en</span><span class="variable">v:</span> &#123;</span><br><span class="line">    browser: true,</span><br><span class="line">    commonj<span class="variable">s:</span> true,</span><br><span class="line">    es6: true</span><br><span class="line">  &#125;,</span><br><span class="line">  // required <span class="keyword">to</span> lint *.vue <span class="keyword">files</span></span><br><span class="line">  plugin<span class="variable">s:</span> [<span class="string">'vue'</span>],</span><br><span class="line">  <span class="built_in">extend</span><span class="variable">s:</span> [<span class="string">'plugin:vue/essential'</span>, <span class="string">'standard'</span>],</span><br><span class="line">  parserOption<span class="variable">s:</span> &#123;</span><br><span class="line">    ecmaVersion: <span class="number">2016</span>,</span><br><span class="line">    sourceType: <span class="string">'module'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  // <span class="built_in">add</span> your custom rules here</span><br><span class="line">  <span class="keyword">global</span><span class="variable">s:</span> &#123;</span><br><span class="line">    audioj<span class="variable">s:</span> true</span><br><span class="line">  &#125;,</span><br><span class="line">  rule<span class="variable">s:</span> &#123;</span><br><span class="line">    // allow async-await</span><br><span class="line">    <span class="string">'generator-star-spacing'</span>: <span class="string">'off'</span>,</span><br><span class="line">    // allow debugger during development</span><br><span class="line">    <span class="string">'no-debugger'</span>: process.env.NODE_ENV === <span class="string">'production'</span> ? <span class="string">'error'</span> : <span class="string">'off'</span>,</span><br><span class="line">    // <span class="string">'no-console'</span>: process.env.NODE_ENV === <span class="string">'production'</span> ? <span class="string">'error'</span> : <span class="string">'off'</span>,</span><br><span class="line">    <span class="string">'no-const-assign'</span>: <span class="string">'warn'</span>,</span><br><span class="line">    <span class="string">'no-this-before-super'</span>: <span class="string">'warn'</span>,</span><br><span class="line">    <span class="string">'no-undef'</span>: <span class="string">'warn'</span>,</span><br><span class="line">    <span class="string">'no-unreachable'</span>: <span class="string">'warn'</span>,</span><br><span class="line">    <span class="string">'no-unused-vars'</span>: <span class="string">'warn'</span>,</span><br><span class="line">    <span class="string">'constructor-super'</span>: <span class="string">'warn'</span>,</span><br><span class="line">    <span class="string">'valid-typeof'</span>: <span class="string">'error'</span>,</span><br><span class="line">    semi: [<span class="string">'error'</span>, <span class="string">'never'</span>],</span><br><span class="line">    inden<span class="variable">t:</span> [<span class="string">'error'</span>, <span class="number">2</span>, &#123; SwitchCase: <span class="number">1</span> &#125;],</span><br><span class="line">    quote<span class="variable">s:</span> [<span class="string">'error'</span>, <span class="string">'single'</span>],</span><br><span class="line">    <span class="string">'brace-style'</span>: <span class="string">'error'</span>,</span><br><span class="line">    <span class="string">'block-scoped-var'</span>: <span class="string">'error'</span>,</span><br><span class="line">    camelcase: <span class="string">'error'</span>,</span><br><span class="line">    <span class="string">'key-spacing'</span>: [</span><br><span class="line">      <span class="string">'error'</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        afterColon: true</span><br><span class="line">      &#125;</span><br><span class="line">    ],</span><br><span class="line">    <span class="string">'space-before-function-paren'</span>: [<span class="string">'error'</span>, <span class="string">'never'</span>],</span><br><span class="line">    <span class="string">'eslint switch-colon-spacing'</span>: <span class="string">'never'</span>,</span><br><span class="line">    <span class="string">'eslint space-return-throw-case'</span>: <span class="string">'never'</span>,</span><br><span class="line">    <span class="string">'space-infix-ops'</span>: <span class="string">'error'</span>,</span><br><span class="line">    <span class="string">'wrap-iife'</span>: [<span class="string">'error'</span>, <span class="string">'outside'</span>]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>你可以根据<a href="http://eslint.cn/docs/user-guide/configuring" target="_blank" rel="noopener">eslint 官网</a>给的文档调整这些规则.</p>
<h3 id="如何打包多个页面"><a href="#如何打包多个页面" class="headerlink" title="如何打包多个页面"></a>如何打包多个页面</h3><p><code>vue-cli-v3.0</code> 新增了一个 <code>pages</code> 选项可以配置多个打包入口，代码的结构结构像这样：</p>
<p><img src="https://file.lantingshucheng.com/2019-01-17-12-26-44.png" alt="项目代码结构"></p>
<p>上面写的 <code>vue.config.js</code> 会自动读取 <code>src/pages</code> 下的项目文件生成 <code>pages</code> 参数</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attribute">entry</span>: <span class="string">'src/pages/page1/page1.js'</span>,</span><br><span class="line">  template: <span class="string">'src/pages/page1/page1.vue'</span>,</span><br><span class="line">  title: <span class="string">'page1'</span>,</span><br><span class="line">  filename: <span class="string">'page1.html'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>打包之后的代码就像这样：</p>
<p><img src="https://file.lantingshucheng.com/2019-01-17-12-32-53.png" alt="打包之后的代码"></p>
<h3 id="结束"><a href="#结束" class="headerlink" title="结束"></a>结束</h3><p>如果你有更好的建议或者困惑的地方，都可以发送邮件到我的邮箱 - <a href="andyliwr@outlook.com">andyliwr@outlook.com</a></p>

  </div>
  <div class="statement">
    <hr>  
    1. 如果本文帮到了您，不妨点一下右上角的”<i class="fas fa-share-alt"></i>“按钮。<br>
    2. 除非注明，本博文章均为原创，转载请以链接形式标明本文地址。<br>
    3. 如果你有任何疑问，欢迎发送邮件到我的邮箱<a href="mailto:andyliwr@outlook.com">andyliwr@outlook.com<br>
  </div>
</article>


    <div class="blog-post-comments">
        <div id="gitalk_thread">
            <noscript>加载评论需要在浏览器启用 JavaScript 脚本支持。</noscript>
        </div>
    </div>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/search/">搜索</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/others/">其他文章</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#前言"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置说明"><span class="toc-number">2.</span> <span class="toc-text">配置说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#如何使用-eslint"><span class="toc-number">3.</span> <span class="toc-text">如何使用 eslint</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#如何打包多个页面"><span class="toc-number">4.</span> <span class="toc-text">如何打包多个页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#结束"><span class="toc-number">5.</span> <span class="toc-text">结束</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&text=vue-cli-v3.0配置说明"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&is_video=false&description=vue-cli-v3.0配置说明"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=vue-cli-v3.0配置说明&body=Check out this article: https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&title=vue-cli-v3.0配置说明"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/&name=vue-cli-v3.0配置说明&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2020 Dikang Li
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/search/">搜索</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/others/">其他文章</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

    </div>
</body>
</html>
<!-- styles -->
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
<link rel="stylesheet" href="/lib/justified-gallery/css/justifiedGallery.min.css">
<link rel="stylesheet" href="/lib/fancybox/jquery.fancybox.css">

<link rel="stylesheet" href="https://file.lantingshucheng.com/blog/v3/static/styles/gitalk.css">


<!-- jquery -->
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/justified-gallery/js/jquery.justifiedGallery.min.js"></script>
<script src="/lib/fancybox/jquery.fancybox.pack.js"></script>

<script type="text/javascript" src="https://file.lantingshucheng.com/blog/v3/static/scripts/md5.js"></script>
<script type="text/javascript" src="https://file.lantingshucheng.com/blog/v3/static/scripts/gitalk.min.js"></script>

<script src="/js/main.js"></script>
<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

    <script type="text/javascript">
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?7851ca7a86be957be994acb77639a5be";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

<!-- Disqus Comments -->


  <script type="text/javascript">
    window.onload = function(){
      if (window.location.href.indexOf('andyliwr.github.io') > -1) {
        var gitalk = new Gitalk({
          clientID: 'ad6f70df0c70d2b715f9',
          clientSecret: '40384bee244c1e17dd7c37733d21e9ef669e969c',
          repo: 'Andyliwr.github.io',
          owner: 'Andyliwr',
          admin: ['Andyliwr'],
          id: md5(location.pathname),
          distractionFreeMode: 'true'
        })
        gitalk.render('gitalk_thread')
      }
    }
  </script>


